/* 全局样式 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); /* 引入 Poppins 字体 */
@import url("./normalize.css"); /* 引入 normalize.css 以确保跨浏览器一致性 */

* {
  outline: none; /* 移除默认的轮廓线 */
  box-sizing: border-box; /* 设置盒模型为 border-box */
}

:root {
  --theme-bg-color: rgba(16 18 27 / 40%); /* 主题背景颜色 */
  --border-color: rgba(113 119 144 / 25%); /* 边框颜色 */
  --theme-color: #f9fafb; /* 主题颜色 */
  --inactive-color: rgb(113 119 144 / 78%); /* 不活跃颜色 */
  --body-font: "Poppins", sans-serif; /* 默认字体 */
  --hover-menu-bg: rgba(12 15 25 / 30%); /* 菜单悬停背景颜色 */
  --content-title-color: #999ba5; /* 内容标题颜色 */
  --content-bg: rgb(146 151 179 / 13%); /* 内容背景颜色 */
  --button-inactive: rgb(249 250 251 / 55%); /* 按钮不活跃颜色 */
  --dropdown-bg: #21242d; /* 下拉菜单背景颜色 */
  --dropdown-hover: rgb(42 46 60); /* 下拉菜单悬停颜色 */
  --popup-bg: rgb(22 25 37); /* 弹出窗口背景颜色 */
  --search-bg: #14162b; /* 搜索框背景颜色 */
  --overlay-bg: rgba(36, 39, 59, 0.3); /* 覆盖层背景颜色 */
  --scrollbar-bg: rgb(1 2 3 / 40%); /* 滚动条背景颜色 */
}

html {
  box-sizing: border-box; /* 设置盒模型为 border-box */
  -webkit-font-smoothing: antialiased; /* 平滑字体渲染 */
}

body {
  font-family: var(--body-font); /* 设置默认字体 */
  background-image: url(https://wallpapershome.com/images/wallpapers/macos-big-sur-1280x720-dark-wwdc-2020-22655.jpg); /* 背景图片 */
  background-size: cover; /* 背景图片覆盖整个视口 */
  background-position: center; /* 背景图片居中 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 垂直排列子元素 */
  padding: 2em; /* 内边距 */
  width: 100%; /* 宽度为 100% */
  height: 100vh; /* 高度为视口高度 */
}

.app {
  background-color: var(--theme-bg-color); /* 背景颜色 */
  max-width: 1250px; /* 最大宽度 */
  max-height: 860px; /* 最大高度 */
  height: 90vh; /* 高度为视口高度的 90% */
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  overflow: hidden; /* 隐藏溢出内容 */
  position: relative; /* 相对定位 */
  width: 100%; /* 宽度为 100% */
  border-radius: 14px; /* 圆角 */
  backdrop-filter: blur(20px); /* 背景模糊效果 */
  -webkit-backdrop-filter: blur(20px); /* Safari 和 Chrome 的背景模糊效果 */
  font-size: 15px; /* 字体大小 */
  font-weight: 500; /* 字体粗细 */
}

.notification {
  position: relative; /* 相对定位 */
}

.notification-number {
  position: absolute; /* 绝对定位 */
  background-color: #3a6df0; /* 背景颜色 */
  width: 16px; /* 宽度 */
  height: 16px; /* 高度 */
  border-radius: 50%; /* 圆角 */
  font-size: 10px; /* 字体大小 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  color: #fff; /* 文字颜色 */
  right: -6px; /* 右偏移 */
  top: -6px; /* 上偏移 */
}

.notification+svg {
  margin-left: 22px; /* 左边距 */
}

@media screen and (max-width: 945px) {
  .notification+svg {
    display: none; /* 在小屏幕设备上隐藏 */
  }
}

.wide .menu-circle {
  margin-right: 0; /* 右边距 */
}

.wrapper {
  display: flex; /* 使用 Flexbox 布局 */
  flex-grow: 1; /* 占据剩余空间 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.updates {
  position: relative; /* 相对定位 */
  top: 0; /* 顶部位置 */
  right: 0; /* 右侧位置 */
  margin-left: auto; /* 左边距自动 */
  width: 18px; /* 宽度 */
  height: 18px; /* 高度 */
  font-size: 11px; /* 字体大小 */
}

.content-wrapper.overlay {
  pointer-events: none; /* 禁止鼠标事件 */
  transition: 0.3s; /* 过渡效果 */
  background-color: var(--overlay-bg); /* 背景颜色 */
}

.overlay-app {
  width: 100%; /* 宽度为 100% */
  height: 100%; /* 高度为 100% */
  position: fixed; /* 固定定位 */
  left: 0; /* 左偏移 */
  top: 0; /* 上偏移 */
  pointer-events: all; /* 允许鼠标事件 */
  background-color: rgba(36, 39, 59, 0.8); /* 背景颜色 */
  opacity: 0; /* 初始透明度 */
  visibility: hidden; /* 初始不可见 */
  transition: 0.3s; /* 过渡效果 */
}

.overlay-app.is-active {
  visibility: visible; /* 显示 */
  opacity: 1; /* 不透明 */
}

.content-button {
  background-color: #3a6df0; /* 背景颜色 */
  border: none; /* 无边框 */
  padding: 8px 26px; /* 内边距 */
  color: #fff; /* 文字颜色 */
  border-radius: 20px; /* 圆角 */
  margin-top: 16px; /* 上边距 */
  cursor: pointer; /* 鼠标指针为手形 */
  transition: 0.3s; /* 过渡效果 */
  white-space: nowrap; /* 防止换行 */
}

.status {
  margin-left: auto; /* 左边距自动 */
  width: 140px; /* 宽度 */
  font-size: 15px; /* 字体大小 */
  position: relative; /* 相对定位 */
}

@media screen and (max-width: 700px) {
  .status {
    display: none; /* 在小屏幕设备上隐藏 */
  }
}

.status-circle {
  width: 6px; /* 宽度 */
  height: 6px; /* 高度 */
  background-color: #396df0; /* 背景颜色 */
  position: absolute; /* 绝对定位 */
  border-radius: 50%; /* 圆角 */
  top: 4px; /* 顶部位置 */
  left: -20px; /* 左侧位置 */
}

.status-circle.green {
  background-color: #3bf083; /* 绿色背景 */
}

.status-button {
  font-size: 15px; /* 字体大小 */
  margin-top: 0; /* 上边距 */
  padding: 6px 24px; /* 内边距 */
}

@media screen and (max-width: 390px) {
  .status-button {
    padding: 6px 14px; /* 小屏幕设备上的内边距 */
  }
}

.status-button.open {
  background: none; /* 无背景 */
  color: var(--button-inactive); /* 文字颜色 */
  border: 1px solid var(--button-inactive); /* 边框颜色 */
}

.status-button:not(.open):hover {
  color: #fff; /* 鼠标悬停时的文字颜色 */
  border-color: #fff; /* 鼠标悬停时的边框颜色 */
}

.content-button:not(.open):hover {
  background: #1e59f1; /* 鼠标悬停时的背景颜色 */
}

.menu {
  width: 5px; /* 宽度 */
  height: 5px; /* 高度 */
  background-color: var(--button-inactive); /* 背景颜色 */
  border-radius: 50%; /* 圆角 */
  box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive); /* 阴影效果 */
  margin: 0 12px; /* 内边距 */
}

@media screen and (max-width: 415px) {
  .adobe-product .menu {
    display: none; /* 在小屏幕设备上隐藏 */
  }
}

.pop-up {
  position: absolute; /* 绝对定位 */
  padding: 30px 40px; /* 内边距 */
  top: 50%; /* 顶部位置 */
  left: 50%; /* 左侧位置 */
  transform: translate(-50%, -50%); /* 居中 */
  overflow-y: auto; /* 垂直滚动条 */
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.4); /* 阴影效果 */
  transition: all 0.3s; /* 过渡效果 */
  z-index: 10; /* 层级 */
  background-color: var(--popup-bg); /* 背景颜色 */
  width: 500px; /* 宽度 */
  visibility: hidden; /* 初始不可见 */
  opacity: 0; /* 初始透明度 */
  border-radius: 6px; /* 圆角 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  white-space: normal; /* 允许换行 */
}

@media screen and (max-width: 570px) {
  .pop-up {
    width: 100%; /* 小屏幕设备上的宽度 */
  }
}

.pop-up.visible {
  visibility: visible; /* 显示 */
  opacity: 1; /* 不透明 */
}

.pop-up__title {
  padding-bottom: 20px; /* 下边距 */
  border-bottom: 1px solid var(--border-color); /* 底边框 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center; /* 垂直居中 */
}

.pop-up__subtitle {
  white-space: normal; /* 允许换行 */
  margin: 20px 0; /* 上下边距 */
  font-size: 14px; /* 字体大小 */
  font-weight: 400; /* 字体粗细 */
  line-height: 1.8em; /* 行高 */
}

.pop-up__subtitle a {
  color: var(--theme-color); /* 链接颜色 */
}

.content-button-wrapper .content-button.status-button.open.close {
  width: auto; /* 自动宽度 */
}

.checkbox-wrapper {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
  font-size: 14px; /* 字体大小 */
  font-weight: 400; /* 字体粗细 */
}

.checkbox-wrapper+.checkbox-wrapper {
  margin: 20px 0 40px; /* 上下边距 */
}

.checkbox {
  display: none; /* 隐藏复选框 */
}

.checkbox+label {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中 */
}

.checkbox+label:before {
  content: ""; /* 伪元素内容 */
  margin-right: 10px; /* 右边距 */
  width: 15px; /* 宽度 */
  height: 15px; /* 高度 */
  border: 1px solid var(--theme-color); /* 边框颜色 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标指针为手形 */
  flex-shrink: 0; /* 不缩小 */
}

.checkbox:checked+label:before {
  background-color: #3a6df0; /* 选中时的背景颜色 */
  border-color: #3a6df0; /* 选中时的边框颜色 */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpath d='M20 6L9 17l-5-5'/%3e%3c/svg%3e"); /* 对勾图标 */
  background-position: 50%; /* 图标居中 */
  background-size: 12px; /* 图标大小 */
  background-repeat: no-repeat; /* 不重复 */
}

.content-button-wrapper {
  margin-top: auto; /* 顶部边距自动 */
  margin-left: auto; /* 左边距自动 */
}

.content-button-wrapper .open {
  margin-right: 8px; /* 右边距 */
}

::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
  border-radius: 10px; /* 滚动条圆角 */
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-bg); /* 滚动条背景颜色 */
  border-radius: 10px; /* 滚动条圆角 */
}